<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="85px">
      <el-form-item label="园所名称：" prop="title">
        <el-input v-model="queryParams.title" @input="handleInput" placeholder="请输入园所名称" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="日期类型：" prop="type">
        <el-radio-group v-model="radioTimeChange" @change="changeTab">
          <el-radio v-for="dict in dateTypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
            :value="dict.dictValue"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="timeLable" prop="type">
        <el-date-picker v-if="type == '1'" v-model="value1" :editable="false" value-format="yyyyMMdd" :picker-options="pickerOptionsDay"
          type="date" placeholder="请选择日期">
        </el-date-picker>
        <el-date-picker v-if="type == '2'" v-model="value2" :editable="false"  value-format="yyyyMM" type="month" placeholder="请选择月" :picker-options="pickerOptionsMonth">
        </el-date-picker>
        <div v-if="type == '3'">
          <el-date-picker style="margin-right: 20px;" :editable="false"  v-model="year" type="year" value-format="yyyy" placeholder="请选择年" :picker-options="pickerOptionsYear">
          </el-date-picker>
          <el-radio-group v-model="xqLb">
            <el-radio :label="1">上</el-radio>
            <el-radio :label="2">下</el-radio>
          </el-radio-group>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div style="text-align: right;margin:-5px 20px 10px 0;">
      <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
    </div>
    <el-table v-loading="loading" :data="categoryList">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column type="index" align="center" label="序号" :index="customeIndex" width="80"></el-table-column>
      <el-table-column label="园所名称" align="center" prop="schoolName" width="140" />
      <el-table-column v-for="dict in foodTypeOptions" :key="dict.id" :label="dict.dictLabel" align="center" width="100"
        :prop="dict.type" />
      <el-table-column label="食材总量" align="center" prop="quantity" />
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

  </div>
</template>

<script>
import { studentlist } from "@/api/qu/yexxgl";
import { getToken } from "@/utils/auth";
import moment from "moment";
import { getcategoryDayDetil, getcategoryMonthDetil, getcategorySemsterDetil, exportFood } from "@/api/qu/qyssyygl";
import { selectSemster } from "@/api/base/semster";
export default {
  name: "",
  data() {
    return {
      radioTimeChange: "日",
      type: '1',
      timeLable: '日期：',
      xqLb: 1,
      startDate: '',
      endDate: '',
      value1: new Date(),
      value2: new Date(),
      year: new Date(),
      // 遮罩层
      loading: true,
      // 选中数组
      total: 0,
      //学期
      semsterList: [],
      categoryList: [],
      dateTypeOptions: [],
      foodTypeOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        nature: ''
      },
      pickerOptionsDay: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      pickerOptionsMonth: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      pickerOptionsYear: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
    };
  },
  created() {
    selectSemster({ 'status': 1 }).then(response => {
      this.semsterList = response.rows;
      this.queryParams.semId = this.semsterList[0].title
      //  console.log(this.queryParams.semId);
    });
    this.getDicts("date_type").then(response => {
      this.dateTypeOptions = response.data;
    });
    this.getDicts("food_type").then(response => {
      this.foodTypeOptions = response.data.map(item => {
        return {
          ...item,
          type: 'category' + item.dictValue
        }
      });;
    });
    this.getList()
  },
  methods: {
    getList() {
      if (this.radioTimeChange == '日') {
        this.getcategoryDayDetil()
      } else if (this.radioTimeChange == '月') {
        this.getcategoryMonthDetil()
      } else if (this.radioTimeChange == '学期') {
        this.getcategorySemsterDetil()
      }
    },
    //图表日期选择
    changeTab(vId) {
      // console.log("dd", this.radioTimeChange);
      // console.log('klkl',vId)
      let obj = {};
      obj = this.dateTypeOptions.find((item) => {  //这里的radioPay就是上面遍历的数据源
        return item.dictLabel === vId;  //筛选出匹配数据，这里的value是你遍历数组每一项的value，如果没有对后台返回的数据做处理，一般为id
      });
      this.type = obj.dictValue  //打印出来的obj.value  就是想要的label值
      // console.log('mkmk',this.type);//  这里的addCagLabel就是对应label的
      if (vId == "学期") {
        this.type = 3;
        this.timeLable = '学期：'
      } else if (vId == "月") {
        this.type = 2;
        this.timeLable = '日期：'
      } else if (vId == "日") {
        this.type = 1;
        this.timeLable = '日期：'
      }
    },
    getTime() {
      if (this.xqLb == '1') {
        this.startDate = moment(this.year).format("YYYY") + '-09-01';
        this.endDate = moment(this.year).add(1, "year").format("YYYY") + '-01-31';
      } else {
        this.startDate = moment(this.year).add(1, "year").format("YYYY") + '-02-01';
        this.endDate = moment(this.year).add(1, "year").format("YYYY") + '-08-01';
      }
    },
    // 一天的各园食材对比
    async getcategoryDayDetil() {
      this.loading = true;
      try {
        const obj = {
          createDate: moment(this.value1).format("YYYY-MM-DD"),
          schoolName: this.queryParams.title,
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
        }
        const data = await getcategoryDayDetil(obj);
        this.categoryList = data.rows;
        this.total = data.total;
        this.loading = false;
        //  this.get()
        //  console.log(data);
      } catch (error) {
        console.log(error);
      }
    },
    // 一月的各园食材对比
    async getcategoryMonthDetil() {
      this.loading = true;
      try {
        const obj = {
          createDate: moment(this.value2).format("YYYY-MM"),
          schoolName: this.queryParams.title,
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
        }
        const data = await getcategoryMonthDetil(obj);
        this.categoryList = data.rows;
        this.total = data.total;
        this.loading = false;
      } catch (error) {
        console.log(error);
      }
    },
    // 学期的各园食材对比
    async getcategorySemsterDetil() {
      this.getTime();
      this.loading = true;
      try {
        const obj = {
          startDate: this.startDate,
          endDate: this.endDate,
          schoolName: this.queryParams.title,
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
        }
        const data = await getcategorySemsterDetil(obj);
        this.categoryList = data.rows;
        this.total = data.total;
        this.loading = false;
      } catch (error) {
        console.log(error);
      }
    },
    // 序号
    customeIndex(index) {
      return index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
    },
    handleInput(val) {
      let regtszf = /[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/g // 特殊字符正则
      let regkg = /[ ]/g// 空格正则
      this.queryParams.title = val.replace(regtszf, '').replace(regkg, '')
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        titel: '',
        pageNum: 1,
        pageSize: 10,
      }
      this.radioTimeChange = '日';
      this.type = 1;
      this.timeLable = '日期：';
      this.value1 = new Date(),
        this.value2 = new Date(),
        this.year = new Date();
      this.xqLb = 1;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      let queryParams = {};
      if (this.radioTimeChange == '日') {
        queryParams = {
          createDate: moment(this.value1).format("YYYY-MM-DD"),
          schoolName: this.queryParams.title,
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
        };
      } else if (this.radioTimeChange == '月') {
        queryParams = {
          createDate: moment(this.value2).format("YYYY-MM"),
          schoolName: this.queryParams.title,
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
        };
      } else if (this.radioTimeChange == '学期') {
        this.getTime();
        queryParams = {
          startDate: this.startDate,
          endDate: this.endDate,
          schoolName: this.queryParams.title,
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
        };
      }
      this.$confirm('是否确认导出数据?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return exportFood(queryParams);
      }).then(response => {
        this.download(response.msg);
      })
    },
  }
};
</script>
